// canvas画板
let canvas = document.getElementById("board");
let context = canvas.getContext("2d");
context.imageSmoothingEnabled = true;
let brushColor = "#000000";
let brushWidth = 8;
let brushPoint = {x: 0, y: 0};
let isDrawing = false;

let eraserWidth = 8;
let useEraser = false;
// PC端 *******************************
// 鼠标按下事件处理程序
canvas.addEventListener("mousedown", function (event) {
    isDrawing = true;
    brushPoint = getBrushPoint(event);
    // 广播绘画数据
    sendDrawData(brushPoint.x, brushPoint.y, true);
    // 判断是否是橡皮
    if (useEraser) {
        drawPoint(brushPoint.x, brushPoint.y, eraserWidth, "#ffffff");
    } else {
        drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor);
    }
});

// 鼠标移动事件处理程序
canvas.addEventListener("mousemove", function (event) {
    if (isDrawing) {
        let newPoint = getBrushPoint(event);
        // 广播绘画数据
        sendDrawData(newPoint.x, newPoint.y, false);
        // 判断是否是橡皮
        if (useEraser) {
            drawLine(brushPoint, newPoint, eraserWidth, "#ffffff");
        } else {
            drawLine(brushPoint, newPoint, brushWidth, brushColor);
        }
        brushPoint = newPoint;
    }
});

// 鼠标释放事件处理程序
canvas.addEventListener("mouseup", function () {
    isDrawing = false;
});

// 移动端 *******************************
// 触摸开始事件处理程序
canvas.addEventListener("touchstart", function (event) {
    isDrawing = true;
    brushPoint = getTouchPoint(event);
    // 广播绘画数据
    sendDrawData(brushPoint.x, brushPoint.y, true);
    // 判断是否是橡皮
    if (useEraser) {
        drawPoint(brushPoint.x, brushPoint.y, eraserWidth, "#ffffff");
    } else {
        drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor);
    }
});

// 触摸移动事件处理程序
canvas.addEventListener("touchmove", function (event) {
    event.preventDefault(); // 防止滚动页面
    if (isDrawing) {
        let newPoint = getTouchPoint(event.touches[0]); // 使用第一个触摸点
        // 广播绘画数据
        sendDrawData(newPoint.x, newPoint.y, false);
        // 判断是否是橡皮
        if (useEraser) {
            drawLine(brushPoint, newPoint, eraserWidth, "#ffffff");
        } else {
            drawLine(brushPoint, newPoint, brushWidth, brushColor);
        }
        brushPoint = newPoint;
    }
});

// 触摸结束事件处理程序
canvas.addEventListener("touchend", function () {
    isDrawing = false;
});

// 计算画笔在画布上的坐标
function getBrushPoint(event) {
    let rect = canvas.getBoundingClientRect();
    return {
        x: (event.clientX - rect.left) * 2,
        y: (event.clientY - rect.top) * 2
    };
}

// 计算画笔在画布上的触摸坐标
function getTouchPoint(touch) {
    let rect = canvas.getBoundingClientRect();
    return {
        x: (touch.clientX - rect.left) * (canvas.width / rect.width),
        y: (touch.clientY - rect.top) * (canvas.height / rect.height)
    };
}

// 绘制单个点
function drawPoint(x, y, width, color) {
    context.beginPath();
    context.fillStyle = color;
    context.arc(x, y, width / 2, 0, Math.PI * 2);
    context.fill();
    context.closePath();
}

// 绘制线段
function drawLine(startPoint, endPoint, whidth, color) {
    context.beginPath();
    context.strokeStyle = color;
    context.lineWidth = whidth;
    context.lineCap = "round";
    context.moveTo(startPoint.x, startPoint.y);
    context.lineTo(endPoint.x, endPoint.y);
    context.stroke();
    context.closePath();
}

// 发送绘图信息的函数
function sendDrawData(x, y, isPoint) {
    // 构造绘图信息对象
    const drawData = {
        x,
        y,
        color: useEraser ? "#ffffff" : brushColor,
        width: useEraser ? eraserWidth : brushWidth,
        isPoint
    };

    sendMessage("room-draw", JSON.stringify(drawData));
}

/**
 * 切换画笔颜色
 * @param color
 */
function changeBrushColor(color) {
    brushColor = color;
}


/**
 * 切换画笔宽度
 * @param width 整数
 */
function changeBrushWidth(width) {
    brushWidth = width;
}

/**
 * 切换橡皮宽度
 * @param width 整数
 */
function changeEraserWidth(width) {
    eraserWidth = width;
}

/**
 * 发送清空画板命令
 */
function sendClearDraw() {
    sendMessage("room-draw-clear", true);
    clearDraw();
}

/**
 * 清空画板
 */
function clearDraw() {
    context.clearRect(0, 0, 600, 600);
    context.beginPath();
    canvas.width = canvas.width;
    showMsg("画板已清空");
}

/**
 * 打开或关闭颜色选择框
 */
function toggleColorBox() {
    $("#width-select-box").hide();
    $("#eraser-select-box").hide();
    $("#color-select-box").show();
}

/**
 * 打开或关闭画笔粗细选择框
 */
function toggleWidthBox() {
    $("#color-select-box").hide();
    $("#eraser-select-box").hide();
    $("#width-select-box").show();
}

/**
 * 打开或关闭橡皮粗细选择框
 */
function toggleEraserBox() {
    $("#width-select-box").hide();
    $("#color-select-box").hide();
    $("#eraser-select-box").show();
}

// 默认隐藏所有工具框
$(".select-box").hide();
/**
 * 颜色按钮事件
 */
$(".color-btn").click(function () {
    changeBrushColor($(this).attr("data-color"));
    $(".color-btn").css("border-color", "transparent");
    $(this).css("border-color", "#ffffff");
})

/**
 * 画笔宽度按钮事件
 */
$(".width-btn").click(function () {
    changeBrushWidth($(this).attr("data-width"));
    $(".width-btn").css("border-color", "#444444");
    $(this).css("border-color", "#ffffff");
})

/**
 * 画笔宽度按钮事件
 */
$(".eraser-btn").click(function () {
    changeEraserWidth($(this).attr("data-width"));
    $(".eraser-btn").css("border-color", "#444444");
    $(this).css("border-color", "#ffffff");
})

/**
 * 橡皮状态切换
 */
$("#eraser-select-btn").click(function () {
    useEraser = !useEraser;
    if(useEraser){
        $(this).css("background-color", "#ffffff");
    }else {
        $(this).css("background-color", "transparent");
    }
})
